<template>
	<view class="main">
		<scroll-view scroll-y="false">
			<!-- 搜索 -->
			<view class="perch"></view>
			<view class="top_search">
				<u-search placeholder="输入您想了解的内容" bgColor="#fff" borderColor="#F1F1F1" v-model="searchValue" :showAction="false"
					@click="jumpSearch()" :disabled="true"></u-search>
			</view>
			<!-- 签到图 -->
			<view class="signIn"></view>

			<!-- 功能区 -->
			<view class="quick_links">
				<!-- :url="item.url" -->
				<navigator :url="item.url" class="link" v-for="(item, index) in quickLinks" :key="index" hover-class="none">
					<u--image :showLoading="true" :src="item.iconSrc" width="80rpx" height="80rpx"></u--image>
					<view class="name">
						{{ item.name }}
					</view>
				</navigator>
			</view>

			<!-- 资讯 -->
			<view class="consult">
				<homeTitle :titleInfo="consultInfo" />
				<view class="line"></view>
				<view class="consultList">
					<view class="consultItem" v-for="(item, index) in consultList" :key="index" @click="goConsultDetails(item)">
						<view class="item_left">
							<view class="consult_title">{{ item.title }}</view>
							<view class="consult_info">
								<view class="consult_time">{{ item.push_date }}</view>
								<view class="reading_quantity">{{ parseInt(item.records) > 9999 ? item.records.slice(0,
									item.records.length
									- 4) + 'W阅读' : item.records + '阅读' }}</view>
							</view>
						</view>
						<view class="item_right">
							<image class="img" :src="item.pic" mode="aspectFill" lazy-load></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/home/index"></script>

<style lang="scss" scoped>
.main {
	width: 100vw;
	height: 100%;
	padding: 0 30rpx;
	background-color: #f6f8fa;
	box-sizing: border-box;
	padding-bottom: 56rpx;

	.perch {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: var(--status-bar-height);
		background: #f6f8fa;
		z-index: 99999;
	}

	.top_search {
		z-index: 100;
		box-sizing: border-box;
		background-color: #f6f8fa;
		padding: 0 30rpx 30rpx 30rpx;
		width: 100vw;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;

		.search {
			display: flex;
			align-items: center;
			height: 70rpx;
			background: #ffffff;
			border-radius: 84rpx 84rpx 84rpx 84rpx;
			opacity: 1;
			border: 2rpx solid #1c87f3;
			padding-left: 30rpx;

			.searchBtn {
				width: 113rpx;
				height: 59rpx;
				background: #1c87f3;
				border-radius: 71rpx 71rpx 71rpx 71rpx;
				padding: 5rpx 0 6rpx 0;
				margin-right: 7rpx;
			}
		}
	}

	.signIn {
		margin: 0 auto;
		width: 690rpx;
		height: 250rpx;
		background-image: url('/static/img/home/signIn.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: calc(var(--status-bar-height) * 2 + 20rpx);
	}

	.quick_links {
		padding: 40rpx 0rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		background-color: #fff;
		border-radius: 15rpx;

		.link {
			display: flex;
			flex-direction: column;
			align-items: center;

			.name {
				margin: 18rpx 0 33rpx 0;
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;
				line-height: 34rpx;
			}

			&:nth-child(n + 5) {
				.name {
					margin: 18rpx 0 0 0;
				}
			}
		}
	}

	.ask {
		padding: 0 30rpx;
		margin-top: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;

		.ask_btn {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.hot_ask,
			.fast_ask {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 299rpx;
				height: 90rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				border-radius: 6rpx 6rpx 6rpx 6rpx;

				.ask_icon {
					margin-right: 11rpx;
				}
			}

			.hot_ask {
				background: #f4f7ff;
			}

			.fast_ask {
				background-color: #f8f8f8;
			}
		}

		.teacherList {
			margin-top: 68rpx;

			.teacher_item {
				display: flex;
				justify-content: space-between;
				padding-bottom: 35rpx;

				border-bottom: 1rpx solid #eeeeee;
				margin-bottom: 47rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.teacher_info {
				width: calc(100% - 176rpx);

				.info_left {

					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					.left_top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.info_name {
							display: flex;
							align-items: center;
							font-size: 32rpx;
							font-weight: 600;
							color: #333333;
							line-height: 46rpx;

							.info_tag {
								margin-left: 11rpx;
							}
						}

						.quiz {
							width: 112rpx;
							height: 56rpx;
							background: #edf6ff;
							border-radius: 74rpx 74rpx 74rpx 74rpx;
							line-height: 56rpx;
							color: #1b6fff;
							text-align: center;
							font-size: 24rpx;
						}
					}

					.info_type {
						margin-top: 14rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 35rpx;

						.type_tag {
							&:first-child {
								padding-left: 0rpx;
							}

							&:not(:last-child) {
								margin-right: 10rpx;
								padding-right: 10rpx;
								border-right: 1rpx solid #999999;
							}
						}
					}

					.goodAt {
						margin-top: 14rpx;
						font-size: 24rpx;
						color: #333333;
						line-height: 35rpx;
					}
				}
			}
		}
	}

	.consult {
		padding: 0 30rpx;
		margin-top: 43rpx;
		background-color: #fff;
		border-radius: 15rpx;

		.line {
			width: 633rpx;
			height: 2rpx;
			opacity: 1;
			border: 2rpx solid #f1f1f1;
		}

		.consultList {
			.consultItem {
				margin-top: 68rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row-reverse;

				&:last-child {
					padding-bottom: 90rpx;
				}

				.item_left {
					width: 360rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.consult_title {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.consult_info {
						display: flex;
						align-items: center;
						justify-content: space-between;

						color: #999999;
						font-size: 24rpx;

						.consult_time {}
					}
				}

				.item_right {
					.img {
						width: 224rpx;
						height: 148rpx;
						border-radius: 10rpx;
					}

				}
			}
		}
	}
}
</style>
